<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改用户信息</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <header>
        <h1>修改用户信息</h1>
    </header>
    <div class="container">
        <nav>
            <ul>
                <li><a href="admin.html">首页</a></li>
                <li><a href="add-car.html">添加新车辆</a></li>
                <li><a href="rentals.html">查看所有车辆情况</a></li>
                <li><a href="edit-user.html" class="active">修改用户信息</a></li>
                <li><a href="reviews.html">查看修改评论</a></li>
                <li><a href="orders.html">查看订单</a></li>
            </ul>
        </nav>
        <main>
            <section>
                <h2>修改用户信息</h2>
                <table id="user-table">
                    <thead>
                        <tr>
                            <th>用户ID</th>
                            <th>姓名</th>
                            <th>邮箱</th>
                            <th>电话</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 用户信息行 (假数据) -->
                        <tr>
                            <td>001</td>
                            <td>张三</td>
                            <td>zhangsan@example.com</td>
                            <td>12345678901</td>
                            <td><button class="edit-button">修改</button></td>
                        </tr>
                        <tr>
                            <td>002</td>
                            <td>李四</td>
                            <td>lisi@example.com</td>
                            <td>12345678902</td>
                            <td><button class="edit-button">修改</button></td>
                        </tr>
                        <!-- 更多用户信息行 -->
                    </tbody>
                </table>
                <div class="pagination">
                    <button id="prev-page">上一页</button>
                    <span id="page-info">第 <span id="current-page">1</span> 页</span>
                    <button id="next-page">下一页</button>
                </div>
            </section>
        </main>
    </div>

    <!-- 模态框 -->
    <div id="edit-modal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>修改用户信息</h2>
            <form id="edit-form">
                <label for="edit-user-id">用户ID:</label>
                <input type="text" id="edit-user-id" name="user-id" readonly>
                <label for="edit-name">姓名:</label>
                <input type="text" id="edit-name" name="name">
                <label for="edit-email">邮箱:</label>
                <input type="email" id="edit-email" name="email">
                <label for="edit-phone">电话:</label>
                <input type="tel" id="edit-phone" name="phone">
                <button type="submit">保存</button>
            </form>
        </div>
    </div>

    <footer>
        <p>&copy; 2024 租车管理系统. 版权所有.</p>
    </footer>
    <script src="js/pagination.js"></script>
    <script src="js/modal.js"></script>
</body>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const modal = document.getElementById("edit-modal");
        const closeButton = document.querySelector(".close-button");
        const editButtons = document.querySelectorAll(".edit-button");
        const editForm = document.getElementById("edit-form");

        editButtons.forEach(button => {
            button.addEventListener("click", function () {
                const row = this.parentElement.parentElement;
                const userId = row.cells[0].innerText;
                const name = row.cells[1].innerText;
                const email = row.cells[2].innerText;
                const phone = row.cells[3].innerText;

                document.getElementById("edit-user-id").value = userId;
                document.getElementById("edit-name").value = name;
                document.getElementById("edit-email").value = email;
                document.getElementById("edit-phone").value = phone;

                modal.style.display = "block";
            });
        });

        closeButton.addEventListener("click", function () {
            modal.style.display = "none";
        });

        window.addEventListener("click", function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        });

        editForm.addEventListener("submit", function (event) {
            event.preventDefault();
            const userId = document.getElementById("edit-user-id").value;
            const name = document.getElementById("edit-name").value;
            const email = document.getElementById("edit-email").value;
            const phone = document.getElementById("edit-phone").value;

            // 在这里进行保存修改后的用户信息的操作
            alert(`用户信息已保存: ${userId}, ${name}, ${email}, ${phone}`);

            modal.style.display = "none";
        });
    });

</script>

</html>